
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
    <style>
        .bg-indigo-100 {
            background-color: #ebf4ff;
        }.border-gray-200 {
             border-color: #edf2f7;
         }.bg-gray-100 {
              background-color: #f7fafc;
          }.bg-indigo-500 {
               background-color: #667eea;
           }
    </style>
</head>

<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox">
<div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
    <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
        <div class="mt-12 flex flex-col items-center">
            <h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
            <div class="w-full flex-1 mt-8">
                <div class="mx-auto max-w-xs">
                    <input id="username" class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" type="text" placeholder="用户名">
                    <input id="password" class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" type="password" placeholder="密码">
                    <div style="margin-top: 10px">
                    <label>
                        <input id="ckb1" class="" type="checkbox"> 记住密码
                    </label>
                    </div>
                    <div style="margin-top: 5px">
                        <div id="msg" style="color: red">&nbsp;</div>
                    </div>
                    <button id="login" class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none">
                        <span class="ml-3">登 录</span>
                    </button>
                    <p class="mt-6 text-xs text-gray-600 text-center">我同意并遵守服务协议</p>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
        <div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat" style="background-image: url('imgs/dlbox.svg');"></div>
    </div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script>
    function login () {
        let query = window.location.search.substring(1).split('=')
        let name = $("#username").val().trim()
        let password = $("#password").val().trim()
        $.ajax({
            url: 'login/login',
            type: 'post',
            dataType: 'json',
            data: {
                loginName: name,
                password: password,
                redirectUrl: query[1]
            },
            success(res) {
                if (res.statusCode === 200) {
                    if ($("#ckb1").is(':checked')) {
                        $.cookie('name', name, {expires: 7});
                        $.cookie('password', password, {expires: 7});
                    } else {
                        $.cookie('name', null, {expires: 0})
                        $.cookie('password', null, {expires: 0})
                    }
                    window.location.href = res.data
                } else {
                    $("#msg").empty().append(res.msg)
                }
            }
        })
    }
    $(function () {
        let name = $.cookie('name')
        let password = $.cookie('password')
        if (name && password) {
            $("#username").val(name)
            $("#password").val(password)
            $("#ckb1").attr('checked', true)
        }


        $(document).keyup(function(e){
            var key = e.which;
            if(key===13){
                login()
            }
        });

        $('#login').click(() => {
            login()
        })
    })
</script>
</body>
</html>